<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body{
				background-color:#252526;
			}
		
			.container{
				margin:50px auto;
				width:40px;
				height:400px;
				background-position:0px 0px;
			}
			.wi{
				padding:0px;
			
			}
			.tp1{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:-160px 0;
			}
			.tp1:hover{
				background-position:120px 0;
			}
			.tp2{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:0px 120px;
			}
			.tp2:hover{
				background-position:-40px 360px;
			}
			.tp3{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:0px 320px;
			}
			.tp3:hover{
				background-position:120px 320px;
			}
			.tp4{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:0px 280px;
			}
			.tp4:hover{
				background-position:120px 280px;
			}
			.tp5{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:0px 240px;
			}
			.tp5:hover{
				background-position:120px 240px;
			}
			.tp6{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:0px 200px;
			}
			.tp6:hover{
				background-position:120px 200px;
			}
			.tp7{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:0px 160px;
			}
			.tp7:hover{
				background-position:120px 160px;
			}
			.tp8{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:0px 120px;
			}
			.tp8:hover{
				background-position:120px 120px;
			}
			.tp9{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:0px 80px;
			}
			.tp9:hover{
				background-position:120px 80px;
			}
			.tp10{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:0px 40px;
			}
			.tp10:hover{
				background-position:120px 40px;
			}
			.tp11{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:80px 0px;
			}
			.tp11:hover{
				background-position:40px 0px;
			}
			.tp12{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:80px -40px;
			}
			.tp12:hover{
				background-position:40px 360px;
			}
			.tp13{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:80px -80px;
			}
			.tp13:hover{
				background-position:40px 320px;
			}
			.tp14{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:80px -120px;
			}
			.tp14:hover{
				background-position:40px 280px;
			}
			.tp15{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:80px -160px;
			}
			.tp15:hover{
				background-position:40px 240px;
			}
			.tp16{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:80px -200px;
			}
			.tp16:hover{
				background-position:40px 200px;
			}
			.tp17{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:80px -240px;
			}
			.tp17:hover{
				background-position:40px 160px;
			}
			.tp18{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:80px -280px;
			}
			.tp18:hover{
				background-position:40px 120px;
			}
			.tp19{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:80px -320px;
			}
			.tp19:hover{
				background-position:40px 80px;
			}
			.tp20{
				width:40px;
				height:40px;
				margin:5px;
				background-image:url('1.png');
				background-position:80px -360px;
			}
			.tp20:hover{
				background-position:40px 40px;
			}
			ul li{list-style:none;}
		</style>
	</head>
	<body>
		<div class='container'>
			<ul class='wi'>
				<li class='tp1'></li>
				<li class='tp2'></li>
				<li class='tp3'></li>
				<li class='tp4'></li>
				<li class='tp5'></li>
				<li class='tp6'></li>
				<li class='tp7'></li>
				<li class='tp8'></li>
				<li class='tp9'></li>
				<li class='tp10'></li>
				<li class='tp11'></li>
				<li class='tp12'></li>
				<li class='tp13'></li>
				<li class='tp14'></li>
				<li class='tp15'></li>
				<li class='tp16'></li>
				<li class='tp17'></li>
				<li class='tp18'></li>
				<li class='tp19'></li>
				<li class='tp20'></li>
			</ul>
		</div>
	</body>
</html>
